<template>
  <div>
    <!-- 日期选择器 -->
    <detail-data @changeDate="changeDate"></detail-data>
    <!-- 历史数据图表 -->
    <div id="container"></div>
    <!-- 警报数据表格 -->
    <bg-alarm-table @getBgDeviceHistoryLog="getBgDeviceHistoryLog"></bg-alarm-table>
  </div>
</template>

<script>
import { Line } from '@antv/g2plot'
import DetailData from '../components/DetailData'
import BgAlarmTable from '@/components/BgAlarmTable.vue'

export default {
  components: { DetailData, BgAlarmTable },
  name: 'BgHistoricalData',
  data() {
    return {
      deviceInfo: {},
      startDate: '',
      endDate: '',
      line: '',
    }
  },
  mounted() {
    this.$http.get('/v1/deviceInfo/list').then(res => {
      this.deviceInfo = res.data[0]
      this.getBgDeviceHistoryLog()
    })

    this.$bus.$on('bgDeviceHistoryLog', this.getBgDeviceHistoryLog)
  },
  methods: {
    changeDate(startDate, endDate) {
      this.startDate = startDate
      this.endDate = endDate
      this.getBgDeviceHistoryLog()
    },
    getBgDeviceHistoryLog() {
      this.$http
        .get('/v1/bgDeviceHistoryLog/list', {
          params: {
            deviceName: this.deviceInfo.deviceName,
            startDate: this.startDate,
            endDate: this.endDate,
          },
        })
        .then(res => {
          const data = res.data.map(item => {
            return {
              currentBg: item.currentBg,
              gmtCreate: item.gmtCreate.replace('T', ' '),
            }
          })
          if (this.line) {
            this.line.changeData(data)
          } else {
            this.line = new Line('container', {
              data: data,
              xField: 'gmtCreate',
              yField: 'currentBg',
              padding: 50,
              yAxis: {
                min: 2,
                max: 7,
              },
              annotations: [
                {
                  type: 'text',
                  position: ['min', this.deviceInfo.borderBgMax],
                  content: '高阈值 ' + this.deviceInfo.borderBgMax + 'mmol/L',
                  offsetY: -4,
                  style: {
                    textBaseline: 'bottom',
                  },
                },
                {
                  type: 'line',
                  start: ['min', this.deviceInfo.borderBgMax],
                  end: ['max', this.deviceInfo.borderBgMax],
                  style: {
                    stroke: '#F4664A',
                    lineDash: [2, 2],
                  },
                },
                {
                  type: 'text',
                  position: ['min', this.deviceInfo.borderBgMin],
                  content: '低阈值 ' + this.deviceInfo.borderBgMin + 'mmol/L',
                  offsetY: -4,
                  style: {
                    textBaseline: 'bottom',
                  },
                },
                {
                  type: 'line',
                  start: ['min', this.deviceInfo.borderBgMin],
                  end: ['max', this.deviceInfo.borderBgMin],
                  style: {
                    stroke: '#F4664A',
                    lineDash: [2, 2],
                  },
                },
              ],
            })
            this.line.render()
          }
        })
    },
  },
}
</script>

<style scoped></style>
